<template>
    <div class="main">
        <zzyhub-header class="header"/>
        <div class="center">
            <div class="first">
                <Card dis-hover class="first-Carousel-card">
                <Carousel class="Carsousel" autoplay v-model="firstCarousel" loop>
                    <CarouselItem v-for="(pic, index) in CarsouselPic" :key="index">
                        <router-link :to="'details'/pic.picId">
                        <img class="Carsousel-Img" :src=pic.picUrl></router-link>
                    </CarouselItem>
                </Carousel>
                    <div class="news-card">
                        <Divider class="first-divider"><label style="font-size: 18px;color: #5f5c5c;top: 0px">今日资讯</label></Divider>
                        <ul style="line-height: 40px;text-align: left;margin-left: 2px">
                            <li>验证失败，曝苹果iPhone 12 5G首批不含京东方OLED版</li>
                            <li>乔思伯发布ITX机箱V8，采用独特抽拉式结构</li>
                            <li>一图看懂小米电视大师系列：4K 120 Hz OLED屏加持,129</li>
                            <li>AMD锐龙7 4700G APU首次跑分：65W掀翻95W i9-9900K</li>
                            <li>唯一坚持MLC闪存！三星980 PRO PCIe 4.0 SSD韩国过审</li>
                            <li>13999元起，索尼4K HDR智能OLED电视A8H系列开售</li>
                            <li>RTX 3070系列的规格来了 RTX 3070或有2944个流处理器</li>
                        </ul>
                    </div>
                </Card>
            </div>
            <div class="topic-div" >
                <Card>
                    <div slot="title">
                    <h2>{{topic}}</h2>
                </div>
                    <div class="topic-left">
            <blog-preview v-for="(good,index) in this.$store.getters.getGoods" :key="index" class="blog-preview"
                          :title=good.name :url=good.url :watched="10" :storage="20" :topic="'平板'"
                          :tags=good.tags :author=good.author :content="20" :detailID=good.id :price="good.price"></blog-preview>
                    </div>
                </Card>
            </div>
        </div>
    </div>
</template>

<script>
    import blogPreview from "@/component/blogPreview";
    import headers from "@/pages/layout/header";
    import store from "@/store/store";
    export default {
        components:{
          'zzyhub-header':headers,
           'blog-preview': blogPreview
        },
        name: "main",
        data(){
            return{
                CarsouselPic:[{
                    picUrl:require('../../assets/preview/carsouelPic.png'),
                    picId:'1233',
                },
                    {picUrl: require('../../assets/preview/first-pic2.png'),
                    picId: '12'}],
                firstCarousel:0,
                title:'2020款iPad Pro 1TB 11寸&12.9寸顶配',
                url:require('../../assets/test.png'),
                tags:['ipad','2020','Apple','1TB','Ipad Pro','生产力工具','种草'],
                topic:'电脑',
                big:'<p><img src="" alt="logo 1.png" rel="1" /></p>\n' +
                    '<h1><a id="_1"></a>这是一个测试页面</h1>\n' +
                    '<p><em>内容填充</em><br />\n' +
                    '<strong>粗体</strong></p>\n' +
                    '<h3><a id="_4"></a>三级标题</h3>\n' +
                    '<p><ins>下划线</ins><br />\n' +
                    '<s>中划线</s><br />\n' +
                    '<mark>标记</mark><br />\n' +
                    'ss<sup>上角标</sup><br />\n' +
                    'ss<sub>下角标</sub></p>\n' +
                    '<div class="hljs-left">\n' +
                    '<p>居左</p>\n' +
                    '</div>\n' +
                    '<div class="hljs-center">\n' +
                    '<p>居中</p>\n' +
                    '</div>\n' +
                    '<div class="hljs-right">\n' +
                    '<p>居右</p>\n' +
                    '<p>::😒</p>\n' +
                    '<blockquote>\n' +
                    '<p>段落引用</p>\n' +
                    '</blockquote>\n' +
                    '<ol>\n' +
                    '<li>123</li>\n' +
                    '</ol>\n' +
                    '<ul>\n' +
                    '<li>123</li>\n' +
                    '</ul>\n' +
                    '<table>\n' +
                    '<thead>\n' +
                    '<tr>\n' +
                    '<th>column1</th>\n' +
                    '<th>column2</th>\n' +
                    '<th>column3</th>\n' +
                    '</tr>\n' +
                    '</thead>\n' +
                    '<tbody>\n' +
                    '<tr>\n' +
                    '<td>content1</td>\n' +
                    '<td>content2</td>\n' +
                    '<td>content3</td>\n' +
                    '</tr>\n' +
                    '</tbody>\n' +
                    '</table>\n' +
                    '</div>'
            };
        },
        mounted(){

                let goods=[{
                    id:'0',
                    url:require("../../assets/goods/goods0.png"),
                    price:'12000',
                    uploadDate:'2020-07-06 13:04:37',
                    name:'thinkpad X1 Carbon 2020',
                    author:'zzy',
                    tags:['thinkpad','x1','reddot','superBook'],
                    historyAuthor:['zzy','wy','wyc','zzy','wy','wyc'],
                    historyPrice:['14000','14500','13000','14000','14500','13000'],
                    detail:this.big,
                },{
                    id:'1',
                    url:require("../../assets/goods/good1.png"),
                    price:'9088',
                    uploadDate:'2020-07-06 13:04:37',
                    name:'Ipad Pro+magic keyboard套装',
                    author:'wyc',
                    tags:['apple','ipad pro','magic keyboard','well','种草','生产力工具'],
                    historyAuthor:['zzy','wy','wyc','zzy','wy','wyc'],
                    historyPrice:['14000','14500','13000','14000','14500','9088'],
                    detail:this.big,
                },{
                    id:'2',
                    url:require("../../assets/goods/good2.png"),
                    price:'800',
                    uploadDate:'2020-07-06 13:04:37',
                    name:'FoxLab Key 65 / Equalz X Olivia /',
                    author:'wy',
                    tags:['keyboard','客制化','樱桃轴','线性手感','完美体验'],
                    historyAuthor:['zzy','wy','wyc','zzy','wy','wyc'],
                    historyPrice:['14000','14500','13000','14000','14500','800'],
                    detail:this.big,
                },{
                    id:'3',
                    url:require("../../assets/goods/good3.png"),
                    price:'600',
                    uploadDate:'2020-07-06 13:04:37',
                    name:'瑞德罗曼智能手表',
                    author:'wyc',
                    tags:['手表','好东西','电子手表','健康检测','无线充电'],
                    historyAuthor:['zzy','wy','wyc','zzy','wy','wyc'],
                    historyPrice:['14000','14500','13000','14000','14500','600'],
                    detail:this.big,
                },{
                    id:'4',
                    url:require("../../assets/goods/good4.png"),
                    price:'12000',
                    uploadDate:'2020-07-06 13:04:37',
                    name:'Dell xps 9300 13 2020',
                    author:'zzy',
                    tags:['thinkpad','x1','reddot','superBook','dell','13inch'],
                    historyAuthor:['zzy','wy','wyc','zzy','wy','wyc'],
                    historyPrice:['14000','14500','13000','14000','14500','13000'],
                    detail:this.big,
                },{
                    id:'5',
                    url:require("../../assets/goods/good5.png"),
                    price:'12000',
                    uploadDate:'2020-07-06 13:04:37',
                    name:'Asus icue',
                    author:'zzy',
                    tags:['i9-9900k','ddr4-4133','1TB SSd','RTX-2080'],
                    historyAuthor:['zzy','wy','wyc','zzy','wy','wyc'],
                    historyPrice:['14000','14500','13000','14000','14500','12000'],
                    detail:this.big,
                }]
                store.commit('deleteGoods');
                store.commit('setGoods',goods);
        }

    }
</script>

<style scoped>
    .main{
        position: relative;
        height: 1000px;
        text-align: center;
        background-color: #d7d7d7;
    }
    .header{
        position: fixed;
        height: 50px;
        top: 0px;
        z-index: 300;
    }
    .center{
        position: absolute;
        left: 50%;
        top:60px;
        margin-left: -500px;
        z-index: 200;
    }
    .first{
        width: 1000px;
        margin-bottom: 10px;
    }
    .Carsousel{
        width: 60%;
        float: left;
        height: 340px;
        border-radius: 10px;
    }
    .Carsousel-Img{
        width: 100%;
        height: 340px;
        border-radius: 10px;
    }
    .first-Carousel-card{
        height: 370px;
    }
    .news-card{
        text-align: center;
        width: 39%;
        float: right;
    }
    .blog-preview{
    }
    .news-card >>> .ivu-divider-horizontal{
        margin-top: 0px;
    }
    .topic-div{
        width: 1000px;
    }
    .topic-left{
        width:100%;
    }
    .topic-left .blog-preview{
        display: inline-block;
        margin-top: 20px;
        margin-left: 5px;
        margin-right: 5px;

    }
</style>
